<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    用户名:<input type="text" id="user"value="请输入用户名"><br />
    <p></p>
    密码:<input type="text" id="pwd" value="请输入密码"><br />
    <p></p>
    <script>
        var userName = document.querySelector("#user");
        var pwd = document.querySelector("#pwd");
        var p = document.querySelectorAll("p");
        //失去焦点
        userName.onblur = function () {
            if (userName.value == "") {
                p[0].innerText = "用户名为必填项";
                p[0].style.color = "red"
                userName.style.backgroundColor = "red"
            }else{
                p[0].innerText = "";
                userName.style.backgroundColor = "white"
            }
            userName.style.color = "black"
        }
        //被鼠标按下
        userName.onmousedown = function(){
            if(userName.value == "请输入用户名"){
                 userName.style.color = "red"
            }
           
        }
        var a = userName.onkeydown = function(){
            userName.value = "";
        }

    </script>
    <div id="div">
        <input type="checkbox" name="hobby" value="唱">唱
        <input type="checkbox" name="hobby" value="跳">跳
        <input type="checkbox" name="hobby" value="RAP">RAP
        <input type="checkbox" name="hobby" value="篮球">篮球
    </div>

    <p></p>
    <script>
        var div = document.querySelector("div");
        var input = document.querySelectorAll("input");
        var p = document.querySelector("p");

        div.onchange = function () {
            var arr = []
            for (let i = 0; i < input.length; i++) {
                if (input[i].checked) {
                    arr.push(input[i].value);
                }
            }
            for(var value of arr){
                
                p.innerText = "你的爱好="+arr;
              
            }  
        
        }
    



    </script>
</body>

</html>